import React, {useEffect, useState} from 'react';
import {Badge, Card, Empty, List} from 'antd';
import { PageContainer} from "@ant-design/pro-components";
import Search from "antd/es/input/Search";
import Meta from "antd/es/card/Meta";
import {useNavigate} from "umi";
import {listInterfaceInfoVoByPageUsingPost} from "@/services/yuanapi_backed/interfaceInfoController";


const InterfaceList: React.FC = () => {

  const [listData,setListData]=useState<API.InterfaceInfoVO[]>([])
  const [loading,setLoading] = useState<boolean>(true)

  // 获取接口列表
  const getListData = async ()=>{
    const res = await listInterfaceInfoVoByPageUsingPost({
      status: 0,
      pageSize: "20",
    })
    if (res.code === 0){
      // @ts-ignore
      setListData(res.data.records)
      setLoading(false)
    }
  }
  useEffect(() => {
    getListData()
  }, []);

  async function handleSearch(value: string) {
    const res = await listInterfaceInfoVoByPageUsingPost({
      status: 0,
      pageSize: "10",
      interfaceName:value,
    })
    if (res.code === 0) {
      // @ts-ignore
      setListData(res.data.records)
      setLoading(false)
    }
    console.log(value)
  }
 const navigate = useNavigate()

  return (
    <PageContainer
      content="🥳选择你需要的接口吧！"
      loading={loading}
      // tabList={[
      //   {
      //     tab: '接口列表',
      //     key: 'base',
      //   },
      //   {
      //     tab: '搜索接口',
      //     key: 'info',
      //   },
      //
      // ]}
      // onTabChange={(key)=>{
      //   setTabStatus(key)
      // }}
      extra={[
        // <Button key="3">操作</Button>,
        // <Button key="2">操作</Button>,
        // <Button key="1" type="primary">
        //   主操作
        // </Button>,
        //
        <Search
          placeholder="搜索您需要的接口吧！"
          key={1}
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={(value) => handleSearch(value)}
        />
      ]}
      // footer={[
      //     <Button key="back" type="primary">
      //       返回
      //     </Button>,
      // ]}
    >

      {listData.length !==0 &&
        <List
          grid={{
            gutter: 16,
            column: 5,
            xs: 1,
            sm: 2,
            md: 4,
            lg: 4,
            xl: 6,
            xxl: 5,
          }}
          dataSource={listData}
          renderItem={(item,index) => (
            <List.Item onClick={()=>{
              navigate("/interface/detail/"+item.id)
            }}
                       key={index}
            >
              <Badge count={item.calledNum} overflowCount={99}>
                <Card
                  hoverable
                  style={{ width: 240 }}
                  cover={<img alt="example" src={"https://x0.ifengimg.com/ucms/2020_49/1EFFC5D57449CCD19883E3DE8DD78CF4A62A5734_w600_h766.jpg"} />}
                >
                  <Meta title={item.interfaceName} description={item.description} />
                </Card>
              </Badge>

            </List.Item>
          )}
        />
      }
      {
        listData.length ===0 &&
        <Empty></Empty>
      }

    </PageContainer>
  )
};

export default InterfaceList;
